<template>
    <div class="container">
        <Form :model="formTop" label-position="top">
        <div class="title">
            <div class="sub-title">
                <span>入沈人员基本信息</span>
                <div class="group">
                    <Input search placeholder="请输入身份证号" v-model="formTop.input0" style="width: 280px;"/>
                    <div class="history">查看数据库 <Icon type="md-link" /></div>
                </div>
            </div>
        </div>
        <div class="sub-content">
            <Row :gutter="20">
                <Col span="8">
                    <FormItem label="姓名">
                        <Input v-model="formTop.input1"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="性别">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in sexType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="年龄">
                        <Input v-model="formTop.input2"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="证件类型">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in cardType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="证件号码">
                        <Input v-model="formTop.input3"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="联系电话">
                        <Input v-model="formTop.input4"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row :gutter="20">
                <Col span="8">
                    <FormItem label="国籍">
                        <Input v-model="formTop.input5"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="户籍地址">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in sexType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="护照号">
                        <Input v-model="formTop.input6"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="入境口岸">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in planParkList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="入境时间">
                        <DatePicker type="date" placeholder="Select date" style="width: 100%"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="目标城市">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="入沈日期">
                        <DatePicker type="date" placeholder="Select date" style="width: 100%"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="入沈事由">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in reasonList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所属区县">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in countyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所属街道">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in streetList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所属社区">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in communityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="24">
                    <FormItem label="居住住址">
                        <Input v-model="formTop.input6"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="人员状态">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in healthList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="入沈方式">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in insyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="入沈航班/车次">
                        <Input v-model="formTop.input6"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="飞机/火车座位号">
                        <Input v-model="formTop.input6"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="来沈前经过地类型">
                        <Input v-model="formTop.input6"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="途经国">
                        <Input v-model="formTop.input6"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="途经省">
                        <Input v-model="formTop.input6"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="途经市">
                        <Input v-model="formTop.input6"></Input>
                    </FormItem>
                </Col>
            </Row>
        </div>
        <div class="title">
            <div class="sub-title">
                <span>隔离人员基本信息</span>
            </div>
        </div>
        <div class="sub-content">
            <Row :gutter="20">
                <Col span="8">
                    <FormItem label="同行人员">
                        <Input v-model="formTop.input1"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="确诊患者姓名">
                        <Input v-model="formTop.input1"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="接触观察日期">
                        <DatePicker type="date" placeholder="Select date" style="width: 100%;"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="是否北京分流">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in devidList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="隔离方式">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in isolateType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="隔离宾馆或单位名称">
                        <Input v-model="formTop.input1"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="隔离开始时间">
                        <DatePicker type="date" placeholder="Select date" style="width: 100%;"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="隔离结束时间">
                        <DatePicker type="date" placeholder="Select date" style="width: 100%;"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="管控地区">
                        <Select v-model="model1" style="width:100%">
                            <Option v-for="item in countyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="隔离宾馆管理单位">
                        <Input v-model="formTop.input1"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="隔离管理人">
                        <Input v-model="formTop.input1"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="送诊时间">
                        <DatePicker type="date" placeholder="Select date" style="width: 100%;"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="送诊地点">
                        <Input v-model="formTop.input1"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="医学观察人姓名">
                        <Input v-model="formTop.input1"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="医学观察人手机">
                        <Input v-model="formTop.input1"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="医学观察人单位">
                        <Input v-model="formTop.input1"></Input>
                    </FormItem>
                </Col>
            </Row>
        </div>
            <div class="title">
                <div class="sub-title">
                    <span>北京分流人员信息</span>
                </div>
            </div>
            <div class="sub-content">
                <Row :gutter="20">
                    <Col span="6">
                        <FormItem label="交通工具">
                            <Input v-model="formTop.input1"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="离沈航班号">
                            <Input v-model="formTop.input1"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="车次">
                            <Input v-model="formTop.input1"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="车牌号">
                            <Input v-model="formTop.input1"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </div>
            <div class="btn-op">
                <Button type="warning">提交信息</Button>
            </div>
        </Form>
    </div>
</template>
<script>
export default {
  data () {
    return {
      dbtype: '和平',
      formTop: {
        input0: '请输入身份证号',
        input1: '',
        input2: '',
        input3: '',
        input4: ''
        // input5: '',
        // input6: '',
        // input7: '',
        // input8: '',
        // input9: '',
        // input10: '',
        // input11: '',
        // input12: '',
        // input13: '',
        // input14: '',
        // input15: '',
        // input16: '',
        // input17: '',
        // input18: ''
      },
      devidList: [
        {
          value: '是',
          label: '是'
        },
        {
          value: '否',
          label: '否'
        }
      ],
      healthList: [
        {
          value: '健康',
          label: '健康'
        },
        {
          value: '不健康',
          label: '不健康'
        },
        {
          value: '有病史',
          label: '有病史'
        }
      ],
      insyList: [
        {
          value: '航班',
          label: '航班'
        },
        {
          value: '铁路',
          label: '铁路'
        },
        {
          value: '客运',
          label: '客运'
        },
        {
          value: '自驾',
          label: '自驾'
        }
      ],
      countyList: [
        {
          value: '市本级',
          label: '市本级'
        },
        {
          value: '和平区',
          label: '和平区'
        },
        {
          value: '沈河区',
          label: '沈河区'
        },
        {
          value: '铁西区',
          label: '铁西区'
        },
        {
          value: '皇姑区',
          label: '皇姑区'
        },
        {
          value: '大东区',
          label: '大东区'
        },
        {
          value: '浑南区',
          label: '浑南区'
        },
        {
          value: '于洪区',
          label: '于洪区'
        },
        {
          value: '沈北新区',
          label: '沈北新区'
        },
        {
          value: '苏家屯区',
          label: '苏家屯区'
        },
        {
          value: '辽中区',
          label: '辽中区'
        },
        {
          value: '新民市',
          label: '新民市'
        },
        {
          value: '法库县',
          label: '法库县'
        },
        {
          value: '康平县',
          label: '康平县'
        }
      ],
      reasonList: [
        {
          value: '回家',
          label: '回家'
        },
        {
          value: '工作',
          label: '工作'
        },
        {
          value: '出差探亲',
          label: '出差探亲'
        },
        {
          value: '居住',
          label: '居住'
        },
        {
          value: '上学',
          label: '上学'
        },
        {
          value: '探亲',
          label: '探亲'
        },
        {
          value: '途经',
          label: '途经'
        },
        {
          value: '学习',
          label: '学习'
        },
        {
          value: '访友',
          label: '访友'
        },
        {
          value: '中转',
          label: '中转'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      isolateType: [
        {
          value: '宾馆隔离(集中安置点)',
          label: '宾馆隔离(集中安置点)'
        },
        {
          value: '单位隔离',
          label: '单位隔离'
        },
        {
          value: '居家隔离(宾馆)',
          label: '居家隔离(宾馆)'
        },
        {
          value: '居家隔离(在家)',
          label: '居家隔离(在家)'
        }
      ],
      streetList: [
        {
          value: '五三街道',
          label: '五三街道'
        },
        {
          value: '上园街道',
          label: '上园街道'
        }
      ],
      communityList: [
        {
          value: '矿北社区',
          label: '矿北社区'
        },
        {
          value: '远洋社区',
          label: '远洋社区'
        }
      ],
      planParkList: [
        {
          value: '首都机场',
          label: '首都机场'
        },
        {
          value: '桃仙',
          label: '桃仙'
        }
      ],
      sexType: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ],
      cityList: [
        {
          value: '沈阳',
          label: '沈阳'
        },
        {
          value: '大连',
          label: '大连'
        }
      ],
      countryList: [
        {
          value: '美国',
          label: '美国'
        },
        {
          value: '意大利',
          label: '意大利'
        },
        {
          value: '日本',
          label: '日本'
        }
      ]
    }
  }
}
</script>

<style scoped>
.title {
    padding: 20px 0;
    border-bottom: 1px solid #efefef;
}
.sub-title {
    border-left: 7px solid darkred;
    font-size: 18px;
    font-weight: 700;
    padding-left: 10px;
    display: flex;
    justify-content: space-between;
}
.sub-content {
    border: 10px solid #efefef;
    padding: 20px 20px 0 20px;
}
.btn-op {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.history {
    color: darkred;
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-size: 12px;
}
.group {
    display: flex;
}
</style>
